<!DOCTYPE html>
<!-- saved from url=(0033)https://www.javaman.cn/vue/nodejs -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if IE]>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
    <![endif]-->

        <title>后端拜拜，用不到你了，前端开发数据模拟神器nodejs - idea激活- IntelliJ IDEA 2021.1激活码破解教程（亲测激活至 2099 年，长期更新）- 爪哇男教程</title>

        <meta name="keywords" content="nodejs,前后端分离,express,mysql,idea,json,mock">

        <meta name="description" content="后端拜拜，用不到你了，前端开发数据模拟神器nodejs">

    <link rel="stylesheet" href="./vue初期_files/layer.css" id="layui_layer_skinlayercss" style=""><link charset="utf-8" rel="stylesheet" href="./vue初期_files/share.min.css"><link charset="utf-8" rel="stylesheet" href="./vue初期_files/OwO.min.css"><link charset="utf-8" rel="stylesheet" href="./vue初期_files/github.css"></head><body class="   pace-done pace-done"><div class="pace  pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
  <div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div><div class="pace  pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
  <div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>&nbsp;

    <link href="./vue初期_files/pace-theme-minimal.css" rel="stylesheet">
    <link href="./vue初期_files/bootstrap.min.css" rel="stylesheet">

    <link href="./vue初期_files/editor.css" rel="stylesheet">
    <link href="./vue初期_files/plugins.css" rel="stylesheet">
    <link href="./vue初期_files/style.css" rel="stylesheet">

    <link href="./vue初期_files/simple-line-icons.css" rel="stylesheet">
    <link href="./vue初期_files/font-awesome.min.css" rel="stylesheet">

    <script src="./vue初期_files/hm.js.下载"></script><script src="./vue初期_files/hm.js.下载"></script><script src="./vue初期_files/pace.min.js.下载"></script>

    <script src="./vue初期_files/jquery.min.js.下载"></script>
    <script src="./vue初期_files/layer.js.下载"></script>
    <script src="./vue初期_files/bootstrap.min.js.下载"></script>

    <script type="text/javascript">
        var _MTONS = _MTONS || {};
        _MTONS.BASE_PATH = '';
        _MTONS.LOGIN_TOKEN = '';
    </script>

    <script src="./vue初期_files/sea.js.下载"></script>
    <script src="./vue初期_files/sea.config.js.下载"></script>

    <!-- Favicons -->
    <link href="https://www.javaman.cn/dist/images/logo/m.png" rel="apple-touch-icon-precomposed">
    <link href="https://www.javaman.cn/dist/images/logo/m.png" rel="shortcut icon">

        <script src="./vue初期_files/sea.js.下载"></script>
        <script src="./vue初期_files/sea.config.js.下载"></script>


    <!-- header -->
<!-- Login dialog BEGIN -->
<div id="login_alert" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="width: 400px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">请登录</h4>
            </div>
            <div class="modal-body">
                <form method="POST" action="https://www.javaman.cn/login" accept-charset="UTF-8">
                    <div class="form-group">
                        <label class="control-label" for="username">账号</label>
                        <input class="form-control" id="ajax_login_username" name="username" type="text" required="">
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="password">密码</label>
                        <input class="form-control" id="ajax_login_password" name="password" type="password" required="">
                    </div>
                    <div class="form-group">
                        <button id="ajax_login_submit" class="btn btn-primary btn-block btn-sm" type="button">
                            登录
                        </button>
                    </div>
                    <div class="form-group">
                        <div id="ajax_login_message" class="text-danger"></div>
                    </div>
                        <fieldset class="form-group">
                        </fieldset>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Login dialog END -->

<!--[if lt IE 9]>
<div class="alert alert-danger alert-dismissible fade in" role="alert" style="margin-bottom:0">
	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	<strong>您正在使用低版本浏览器，</strong> 在本页面的显示效果可能有差异。
	建议您升级到
	<a href="http://www.google.cn/intl/zh-CN/chrome/" target="_blank">Chrome</a>
	或以下浏览器：
	<a href="www.mozilla.org/en-US/firefox/‎" target="_blank">Firefox</a> /
	<a href="http://www.apple.com.cn/safari/" target="_blank">Safari</a> /
	<a href="http://www.opera.com/" target="_blank">Opera</a> /
	<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" target="_blank">Internet Explorer 9+</a>
</div>
<![endif]-->

<!-- Fixed navbar -->
<header class="site-header headroom">
    <div class="container">
        <nav class="navbar" role="navigation">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="https://www.javaman.cn/">
                    <img src="./vue初期_files/logo.png">
                </a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <!--
						<li>
							<a href="/channel/3" nav="idea激活码破解使用教程">idea激活码破解使用教程</a>
						</li>
						<li>
							<a href="/channel/4" nav="Spring Boot 2.0 教程">Spring Boot 2.0 教程</a>
						</li>
						<li>
							<a href="/channel/1" nav="kettle教程">kettle教程</a>
						</li>
						<li>
							<a href="/channel/19" nav="vue教程">vue教程</a>
						</li>
						<li>
							<a href="/channel/18" nav="git教程">git教程</a>
						</li>
						<li>
							<a href="/channel/17" nav="技术杂文">技术杂文</a>
						</li>
						<li>
							<a href="/channel/16" nav="Docker教程">Docker教程</a>
						</li>
						<li>
							<a href="/channel/15" nav="Java基础">Java基础</a>
						</li>
					-->
                    <!--
                        <li>
                            <a href="/tags" nav="tags">标签</a>
                        </li>
                    -->
                </ul>
                <ul class="navbar-button list-inline" id="header_user">
                    <li view="search" class="hidden-xs hidden-sm">
                        <form method="GET" action="https://www.javaman.cn/search" accept-charset="UTF-8" class="navbar-form navbar-left">
                            <div class="form-group">
                                <input class="form-control search-input mac-style" placeholder="搜索" name="kw" type="text" value="">
                                <button class="search-btn" type="submit"><i class="fa fa-search"></i></button>
                            </div>
                        </form>
                    </li>

                    <li><a href="https://www.javaman.cn/login" class="btn btn-default btn-sm signup">登录</a></li>
                        <li><a href="https://www.javaman.cn/register" class="btn btn-primary btn-sm signup">注册</a></li>

                </ul>
            </div>
        </nav>
    </div>
</header>

<script type="text/javascript">
$(function () {
	$('a[nav]').each(function(){  
        $this = $(this);
        if($this[0].href == String(window.location)){  
            $this.closest('li').addClass("active");  
        }  
    });
});

var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?5dafbedfaf3cab626e3f62c944337589";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Header END -->
    <!-- /header -->

    <!-- content -->
    <div class="wrap">
        <!-- Main -->
        <div class="container-fluid">
            <div class="row" style="margin: -20px">
            <div class="row">
                <div class="col-xs-24 col-md-2 side-left" style="margin-left: 10px;">
                        <div><h4><strong>vue教程</strong></h4></div>
                        <div class="posts">
                            <ul class="posts-list">
    <style>
        .content:hover{
            background-color: #0BABF4;
            cursor:pointer;
        }


    </style>
<li class="content li-selected" style="margin-top: 10px;height: 30px;">
    <div class="content-box posts-aside">
            <div class="posts-item li-selected" content_val="60" style="height: 20px;">
                <div class="item-title">
                    <h2 style="margin-top: 4px"><a class="my_a a-selected" href="https://www.javaman.cn/vue/nodejs">后端拜拜，用不到你了，前端开发数据模拟神器nodejs</a></h2>
                </div>
                <div class="item-text">后端拜拜，用不到你了，前端开发数据模拟神器nodejs  欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javam...</div>
                <div class="item-info">
                    <ul>
                        <li class="post-author hidden-xs">
                            <div class="avatar">
                                <img src="./vue初期_files/001_240.jpg" class="lazy avatar avatar-50 photo" height="50" width="50">
                            </div>
                            <a href="https://www.javaman.cn/users/1" target="_blank" class="a-selected">管理员</a>
                        </li>
                        <li class="ico-cat"><span class=" hidden-xs label label-default  channel_top">vue教程</span>
</li>
                        <li class="ico-time"><i class="icon-clock"></i>1年前</li>
                        <li class="ico-eye hidden-xs"><i class="icon-book-open"></i>0</li>
                        <li class="ico-like hidden-xs"><i class="icon-bubble"></i>0</li>
                    </ul>
                </div>
            </div>
        </div>
</li>
    <style>
        .content:hover{
            background-color: #0BABF4;
            cursor:pointer;
        }


    </style>
<li class="content" style="margin-top: 10px;height: 30px;">
    <div class="content-box posts-aside">
            <div class="posts-item" content_val="52" style="height: 20px;">
                <div class="item-title">
                    <h2 style="margin-top: 4px"><a class="my_a" href="https://www.javaman.cn/vue/hello-vue">vue入门教程1-hello-vue</a></h2>
                </div>
                <div class="item-text">vue初学者入门教程 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/hello-vu...</div>
                <div class="item-info">
                    <ul>
                        <li class="post-author hidden-xs">
                            <div class="avatar">
                                <img src="./vue初期_files/001_240.jpg" class="lazy avatar avatar-50 photo" height="50" width="50">
                            </div>
                            <a href="https://www.javaman.cn/users/1" target="_blank">管理员</a>
                        </li>
                        <li class="ico-cat"><span class=" hidden-xs label label-default  channel_top">vue教程</span>
</li>
                        <li class="ico-time"><i class="icon-clock"></i>1年前</li>
                        <li class="ico-eye hidden-xs"><i class="icon-book-open"></i>0</li>
                        <li class="ico-like hidden-xs"><i class="icon-bubble"></i>0</li>
                    </ul>
                </div>
            </div>
        </div>
</li>
    <style>
        .content:hover{
            background-color: #0BABF4;
            cursor:pointer;
        }


    </style>
<li class="content" style="margin-top: 10px;height: 30px;">
    <div class="content-box posts-aside">
            <div class="posts-item" content_val="53" style="height: 20px;">
                <div class="item-title">
                    <h2 style="margin-top: 4px"><a class="my_a" href="https://www.javaman.cn/vue/vue-if-for">vue入门教程之基础语法</a></h2>
                </div>
                <div class="item-text">vue入门教程之基础语法 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-if...</div>
                <div class="item-info">
                    <ul>
                        <li class="post-author hidden-xs">
                            <div class="avatar">
                                <img src="./vue初期_files/001_240.jpg" class="lazy avatar avatar-50 photo" height="50" width="50">
                            </div>
                            <a href="https://www.javaman.cn/users/1" target="_blank">管理员</a>
                        </li>
                        <li class="ico-cat"><span class=" hidden-xs label label-default  channel_top">vue教程</span>
</li>
                        <li class="ico-time"><i class="icon-clock"></i>1年前</li>
                        <li class="ico-eye hidden-xs"><i class="icon-book-open"></i>0</li>
                        <li class="ico-like hidden-xs"><i class="icon-bubble"></i>0</li>
                    </ul>
                </div>
            </div>
        </div>
</li>
    <style>
        .content:hover{
            background-color: #0BABF4;
            cursor:pointer;
        }


    </style>
<li class="content" style="margin-top: 10px;height: 30px;">
    <div class="content-box posts-aside">
            <div class="posts-item" content_val="54" style="height: 20px;">
                <div class="item-title">
                    <h2 style="margin-top: 4px"><a class="my_a" href="https://www.javaman.cn/vue/vue-model">vue入门教程之-属性、事件和双向绑定</a></h2>
                </div>
                <div class="item-text">vue入门教程之-属性、事件和双向绑定 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue...</div>
                <div class="item-info">
                    <ul>
                        <li class="post-author hidden-xs">
                            <div class="avatar">
                                <img src="./vue初期_files/001_240.jpg" class="lazy avatar avatar-50 photo" height="50" width="50">
                            </div>
                            <a href="https://www.javaman.cn/users/1" target="_blank">管理员</a>
                        </li>
                        <li class="ico-cat"><span class=" hidden-xs label label-default  channel_top">vue教程</span>
</li>
                        <li class="ico-time"><i class="icon-clock"></i>1年前</li>
                        <li class="ico-eye hidden-xs"><i class="icon-book-open"></i>0</li>
                        <li class="ico-like hidden-xs"><i class="icon-bubble"></i>0</li>
                    </ul>
                </div>
            </div>
        </div>
</li>
    <style>
        .content:hover{
            background-color: #0BABF4;
            cursor:pointer;
        }


    </style>
<li class="content" style="margin-top: 10px;height: 30px;">
    <div class="content-box posts-aside">
            <div class="posts-item" content_val="55" style="height: 20px;">
                <div class="item-title">
                    <h2 style="margin-top: 4px"><a class="my_a" href="https://www.javaman.cn/vue/vue-component">vue入门教程之-组件</a></h2>
                </div>
                <div class="item-text">vue入门教程之-组件 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-com...</div>
                <div class="item-info">
                    <ul>
                        <li class="post-author hidden-xs">
                            <div class="avatar">
                                <img src="./vue初期_files/001_240.jpg" class="lazy avatar avatar-50 photo" height="50" width="50">
                            </div>
                            <a href="https://www.javaman.cn/users/1" target="_blank">管理员</a>
                        </li>
                        <li class="ico-cat"><span class=" hidden-xs label label-default  channel_top">vue教程</span>
</li>
                        <li class="ico-time"><i class="icon-clock"></i>1年前</li>
                        <li class="ico-eye hidden-xs"><i class="icon-book-open"></i>0</li>
                        <li class="ico-like hidden-xs"><i class="icon-bubble"></i>0</li>
                    </ul>
                </div>
            </div>
        </div>
</li>
    <style>
        .content:hover{
            background-color: #0BABF4;
            cursor:pointer;
        }


    </style>
<li class="content" style="margin-top: 10px;height: 30px;">
    <div class="content-box posts-aside">
            <div class="posts-item" content_val="56" style="height: 20px;">
                <div class="item-title">
                    <h2 style="margin-top: 4px"><a class="my_a" href="https://www.javaman.cn/vue/vue-slot">vue入门教程之-插槽</a></h2>
                </div>
                <div class="item-text">vue入门教程之-插槽 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-slo...</div>
                <div class="item-info">
                    <ul>
                        <li class="post-author hidden-xs">
                            <div class="avatar">
                                <img src="./vue初期_files/001_240.jpg" class="lazy avatar avatar-50 photo" height="50" width="50">
                            </div>
                            <a href="https://www.javaman.cn/users/1" target="_blank">管理员</a>
                        </li>
                        <li class="ico-cat"><span class=" hidden-xs label label-default  ">vue教程</span>
</li>
                        <li class="ico-time"><i class="icon-clock"></i>1年前</li>
                        <li class="ico-eye hidden-xs"><i class="icon-book-open"></i>0</li>
                        <li class="ico-like hidden-xs"><i class="icon-bubble"></i>0</li>
                    </ul>
                </div>
            </div>
        </div>
</li>
                            </ul>
                        </div>
                </div>
                <div class="col-xs-24 col-md-7 topics-show" style="margin-top: -30px">



    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if IE]>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
    <![endif]-->

        <title>后端拜拜，用不到你了，前端开发数据模拟神器nodejs - idea激活- IntelliJ IDEA 2021.1激活码破解教程（亲测激活至 2099 年，长期更新）- 爪哇男教程</title>

        <meta name="keywords" content="nodejs,前后端分离,express,mysql,idea,json,mock">

        <meta name="description" content="后端拜拜，用不到你了，前端开发数据模拟神器nodejs">

    &nbsp;

    <link href="./vue初期_files/pace-theme-minimal.css" rel="stylesheet">
    <link href="./vue初期_files/bootstrap.min.css" rel="stylesheet">

    <link href="./vue初期_files/editor.css" rel="stylesheet">
    <link href="./vue初期_files/plugins.css" rel="stylesheet">
    <link href="./vue初期_files/style.css" rel="stylesheet">

    <link href="./vue初期_files/simple-line-icons.css" rel="stylesheet">
    <link href="./vue初期_files/font-awesome.min.css" rel="stylesheet">

    <script src="./vue初期_files/pace.min.js.下载"></script>

    <script src="./vue初期_files/jquery.min.js.下载"></script>
    <script src="./vue初期_files/layer.js.下载"></script>
    <script src="./vue初期_files/bootstrap.min.js.下载"></script>

    <script type="text/javascript">
        var _MTONS = _MTONS || {};
        _MTONS.BASE_PATH = '';
        _MTONS.LOGIN_TOKEN = '';
    </script>

    <script src="./vue初期_files/sea.js.下载"></script>
    <script src="./vue初期_files/sea.config.js.下载"></script>

    <!-- Favicons -->
    <link href="https://www.javaman.cn/dist/images/logo/m.png" rel="apple-touch-icon-precomposed">
    <link href="https://www.javaman.cn/dist/images/logo/m.png" rel="shortcut icon">

        <script src="./vue初期_files/sea.js.下载"></script>
        <script src="./vue初期_files/sea.config.js.下载"></script>


    <!-- header -->
<!-- Login dialog BEGIN -->
<div id="login_alert" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="width: 400px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">请登录</h4>
            </div>
            <div class="modal-body">
                <form method="POST" action="https://www.javaman.cn/login" accept-charset="UTF-8">
                    <div class="form-group">
                        <label class="control-label" for="username">账号</label>
                        <input class="form-control" id="ajax_login_username" name="username" type="text" required="">
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="password">密码</label>
                        <input class="form-control" id="ajax_login_password" name="password" type="password" required="">
                    </div>
                    <div class="form-group">
                        <button id="ajax_login_submit" class="btn btn-primary btn-block btn-sm" type="button">
                            登录
                        </button>
                    </div>
                    <div class="form-group">
                        <div id="ajax_login_message" class="text-danger"></div>
                    </div>
                        <fieldset class="form-group">
                        </fieldset>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Login dialog END -->

<!--[if lt IE 9]>
<div class="alert alert-danger alert-dismissible fade in" role="alert" style="margin-bottom:0">
	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	<strong>您正在使用低版本浏览器，</strong> 在本页面的显示效果可能有差异。
	建议您升级到
	<a href="http://www.google.cn/intl/zh-CN/chrome/" target="_blank">Chrome</a>
	或以下浏览器：
	<a href="www.mozilla.org/en-US/firefox/‎" target="_blank">Firefox</a> /
	<a href="http://www.apple.com.cn/safari/" target="_blank">Safari</a> /
	<a href="http://www.opera.com/" target="_blank">Opera</a> /
	<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" target="_blank">Internet Explorer 9+</a>
</div>
<![endif]-->

<!-- Fixed navbar -->
<header class="site-header headroom">
    <div class="container">
        <nav class="navbar" role="navigation">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="https://www.javaman.cn/">
                    <img src="./vue初期_files/logo.png">
                </a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <!--
						<li>
							<a href="/channel/3" nav="idea激活码破解使用教程">idea激活码破解使用教程</a>
						</li>
						<li>
							<a href="/channel/4" nav="Spring Boot 2.0 教程">Spring Boot 2.0 教程</a>
						</li>
						<li>
							<a href="/channel/1" nav="kettle教程">kettle教程</a>
						</li>
						<li>
							<a href="/channel/19" nav="vue教程">vue教程</a>
						</li>
						<li>
							<a href="/channel/18" nav="git教程">git教程</a>
						</li>
						<li>
							<a href="/channel/17" nav="技术杂文">技术杂文</a>
						</li>
						<li>
							<a href="/channel/16" nav="Docker教程">Docker教程</a>
						</li>
						<li>
							<a href="/channel/15" nav="Java基础">Java基础</a>
						</li>
					-->
                    <!--
                        <li>
                            <a href="/tags" nav="tags">标签</a>
                        </li>
                    -->
                </ul>
                <ul class="navbar-button list-inline" id="header_user">
                    <li view="search" class="hidden-xs hidden-sm">
                        <form method="GET" action="https://www.javaman.cn/search" accept-charset="UTF-8" class="navbar-form navbar-left">
                            <div class="form-group">
                                <input class="form-control search-input mac-style" placeholder="搜索" name="kw" type="text" value="">
                                <button class="search-btn" type="submit"><i class="fa fa-search"></i></button>
                            </div>
                        </form>
                    </li>

                    <li><a href="https://www.javaman.cn/login" class="btn btn-default btn-sm signup">登录</a></li>
                        <li><a href="https://www.javaman.cn/register" class="btn btn-primary btn-sm signup">注册</a></li>

                </ul>
            </div>
        </nav>
    </div>
</header>

<script type="text/javascript">
$(function () {
	$('a[nav]').each(function(){  
        $this = $(this);
        if($this[0].href == String(window.location)){  
            $this.closest('li').addClass("active");  
        }  
    });
});

var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?5dafbedfaf3cab626e3f62c944337589";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Header END -->
    <!-- /header -->

    <!-- content -->
    <div class="wrap">
        <!-- Main -->
        <div class="container-fluid">
            <div class="row" style="margin: -20px">
        <div class="row main">
            <div class="col-xs-24 col-md-12 side-left topics-show">
                <!-- view show -->
                <div class="topic panel panel-default fulltext">
                    <div class="content-body entry-content panel-body ">
                        <div class="markdown-body">
                        <h3>后端拜拜，用不到你了，前端开发数据模拟神器nodejs</h3>
<blockquote>
<p>欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/nodejs</p>
</blockquote>
<blockquote>
<p><strong>大家好，我是大师，在前后端分离越来越成熟的今天，很多前端都要依赖后端的开发进度才能进行前端的数据展示。今天给大家介绍一款nodejs超级好用的模块express！</strong></p>
</blockquote>
<h4>一、引入express和mysql模块组件，并初始化express组件</h4>
<pre class="hljs javascript"><code class="language-javascript hljs"><span class="hljs-keyword"><span class="hljs-keyword">const</span></span> express = <span class="hljs-built_in"><span class="hljs-built_in">require</span></span>(<span class="hljs-string"><span class="hljs-string">"express"</span></span>);
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> mysql = <span class="hljs-built_in"><span class="hljs-built_in">require</span></span>(<span class="hljs-string"><span class="hljs-string">"mysql"</span></span>);
<span class="hljs-comment"><span class="hljs-comment">//初始化express模块组件</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> app = express();
</code></pre>
<h4>二、配置mysql的数据库连接</h4>
<pre class="hljs javascript"><code class="language-javascript hljs"><span class="hljs-comment"><span class="hljs-comment">//mysql初始化db配置</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> db = mysql.createConnection({
	<span class="hljs-attr"><span class="hljs-attr">host</span></span>:<span class="hljs-string"><span class="hljs-string">"localhost"</span></span>,
	<span class="hljs-attr"><span class="hljs-attr">user</span></span>:<span class="hljs-string"><span class="hljs-string">"root"</span></span>,
	<span class="hljs-attr"><span class="hljs-attr">password</span></span>:<span class="hljs-string"><span class="hljs-string">"123456"</span></span>,
	<span class="hljs-attr"><span class="hljs-attr">database</span></span>:<span class="hljs-string"><span class="hljs-string">"db_test"</span></span>
})
<span class="hljs-comment"><span class="hljs-comment">//连接mysql</span></span>
db.connect(<span class="hljs-function"><span class="hljs-function">(</span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">err</span></span></span><span class="hljs-function">)=&gt;</span></span>{
	<span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(err) <span class="hljs-keyword"><span class="hljs-keyword">throw</span></span> err;
	<span class="hljs-built_in"><span class="hljs-built_in">console</span></span>.log(<span class="hljs-string"><span class="hljs-string">"连接成功"</span></span>)
})
</code></pre>
<h4>三、调用sql语句，并将结果组装成json串</h4>
<pre class="hljs coffeescript"><code class="language-javascript hljs"><span class="hljs-regexp"><span class="hljs-comment">//</span></span><span class="hljs-comment">app.get方法，第一个参数为url路径，</span>
app.get(<span class="hljs-string"><span class="hljs-string">"/getUsers"</span></span>,<span class="hljs-function"><span class="hljs-params">(req,res)</span>=&gt;</span>{
    <span class="hljs-regexp"><span class="hljs-comment">//</span></span><span class="hljs-comment">创建sql语句</span>
	<span class="hljs-keyword">let</span> sql = <span class="hljs-string"><span class="hljs-string">"select id,username,name from sys_user"</span></span>;
	<span class="hljs-regexp"><span class="hljs-comment">//</span></span><span class="hljs-comment">调用db的查询方法</span>
    db.query(sql,<span class="hljs-function"><span class="hljs-params">(err,result)</span>=&gt;</span>{
		<span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(err){
			<span class="hljs-built_in"><span class="hljs-built_in">console</span></span>.log(err);
		}<span class="hljs-keyword"><span class="hljs-keyword">else</span></span>{
            <span class="hljs-regexp"><span class="hljs-comment">//</span></span><span class="hljs-comment">返回json</span>
			res.json(result);
		}
	})
})
</code></pre>
<h4>四、启动app，监听3000端口</h4>
<pre class="hljs coffeescript"><code class="language-javascript hljs">app.listen(<span class="hljs-number"><span class="hljs-number">3000</span></span>,<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
	<span class="hljs-built_in"><span class="hljs-built_in">console</span></span>.log(<span class="hljs-string"><span class="hljs-string">"服务器在3000端口运行"</span></span>)
})
</code></pre>
<h4>五、启动nodejs，服务器启动成功</h4>
<p><img src="./vue初期_files/20RJ1BO4K19H3E84IFSVOA11PG.png" alt="nodejs启动express.png"></p>
<h4>六、浏览器输入地址：<a href="http://localhost:3000/getUsers">localhost:3000/getUsers</a></h4>
<p><img src="./vue初期_files/1AMBPV8493MPFD6T81GA9CS704.png" alt="返回json字符串.png"></p>
<h4>有个这个神器是不是很爽，前台也可以肆意妄为的抠腚了，不用再依赖后端的进度了！！！</h4>
<br><p class="copyright">欢迎转载，转载请标注出处。关注公众号: <b style="color:#000">JAVA大师</b>, 后台回复 <b style="color:#000">资源</b>，既可获取资源链接 ！！！</p>
                        </div>
                    </div>
                    <div class="panel-footer operate">
                            <span>
                                <a class="label label-default" href="https://www.javaman.cn/tag/nodejs/">#nodejs</a>
                            </span>
                    </div>
                    <div class="panel-footer">
                        <div class="hidden-xs">
                            <div class="social-share share-component" data-sites="qq, weibo, wechat"><a class="social-share-icon icon-qq" href="http://connect.qq.com/widget/shareqq/index.html?url=https%3A%2F%2Fwww.javaman.cn%2Fvue%2Fnodejs&amp;title=%E5%90%8E%E7%AB%AF%E6%8B%9C%E6%8B%9C%EF%BC%8C%E7%94%A8%E4%B8%8D%E5%88%B0%E4%BD%A0%E4%BA%86%EF%BC%8C%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%8B%9F%E7%A5%9E%E5%99%A8nodejs%20-%20idea%E6%BF%80%E6%B4%BB-%20IntelliJ%20IDEA%202021.1%E6%BF%80%E6%B4%BB%E7%A0%81%E7%A0%B4%E8%A7%A3%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%B2%E6%B5%8B%E6%BF%80%E6%B4%BB%E8%87%B3%202099%20%E5%B9%B4%EF%BC%8C%E9%95%BF%E6%9C%9F%E6%9B%B4%E6%96%B0%EF%BC%89-%20%E7%88%AA%E5%93%87%E7%94%B7%E6%95%99%E7%A8%8B&amp;source=%E5%90%8E%E7%AB%AF%E6%8B%9C%E6%8B%9C%EF%BC%8C%E7%94%A8%E4%B8%8D%E5%88%B0%E4%BD%A0%E4%BA%86%EF%BC%8C%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%8B%9F%E7%A5%9E%E5%99%A8nodejs%20-%20idea%E6%BF%80%E6%B4%BB-%20IntelliJ%20IDEA%202021.1%E6%BF%80%E6%B4%BB%E7%A0%81%E7%A0%B4%E8%A7%A3%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%B2%E6%B5%8B%E6%BF%80%E6%B4%BB%E8%87%B3%202099%20%E5%B9%B4%EF%BC%8C%E9%95%BF%E6%9C%9F%E6%9B%B4%E6%96%B0%EF%BC%89-%20%E7%88%AA%E5%93%87%E7%94%B7%E6%95%99%E7%A8%8B&amp;desc=%E5%90%8E%E7%AB%AF%E6%8B%9C%E6%8B%9C%EF%BC%8C%E7%94%A8%E4%B8%8D%E5%88%B0%E4%BD%A0%E4%BA%86%EF%BC%8C%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%8B%9F%E7%A5%9E%E5%99%A8nodejs&amp;pics=https%3A%2F%2Fwww.javaman.cn%2Fdist%2Fimages%2Flogo%2Flogo.png&amp;summary=%22%E5%90%8E%E7%AB%AF%E6%8B%9C%E6%8B%9C%EF%BC%8C%E7%94%A8%E4%B8%8D%E5%88%B0%E4%BD%A0%E4%BA%86%EF%BC%8C%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%8B%9F%E7%A5%9E%E5%99%A8nodejs%22" target="_blank"></a><a class="social-share-icon icon-weibo" href="http://service.weibo.com/share/share.php?url=https%3A%2F%2Fwww.javaman.cn%2Fvue%2Fnodejs&amp;title=%E5%90%8E%E7%AB%AF%E6%8B%9C%E6%8B%9C%EF%BC%8C%E7%94%A8%E4%B8%8D%E5%88%B0%E4%BD%A0%E4%BA%86%EF%BC%8C%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%8B%9F%E7%A5%9E%E5%99%A8nodejs%20-%20idea%E6%BF%80%E6%B4%BB-%20IntelliJ%20IDEA%202021.1%E6%BF%80%E6%B4%BB%E7%A0%81%E7%A0%B4%E8%A7%A3%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%B2%E6%B5%8B%E6%BF%80%E6%B4%BB%E8%87%B3%202099%20%E5%B9%B4%EF%BC%8C%E9%95%BF%E6%9C%9F%E6%9B%B4%E6%96%B0%EF%BC%89-%20%E7%88%AA%E5%93%87%E7%94%B7%E6%95%99%E7%A8%8B&amp;pic=https%3A%2F%2Fwww.javaman.cn%2Fdist%2Fimages%2Flogo%2Flogo.png&amp;appkey=" target="_blank"></a><a class="social-share-icon icon-wechat" href="javascript:"><div class="wechat-qrcode"><h4>微信扫一扫：分享</h4><div class="qrcode" title="https://www.javaman.cn/vue/nodejs"><canvas width="100" height="100" style="display: none;"></canvas><img alt="Scan me!" src="" style="display: block;"></div><div class="help"><p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p></div></div></a></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                </div>

                <!-- Comments -->
                <div id="chat" class="chats shadow-box">
                    <div class="chat_header">
                        <h4>全部评论: <span id="chat_count">0</span> 条</h4>
                    </div>
                    <ul id="chat_container" class="its"></ul>
                    <div id="pager" class="text-center"></div>
                    <div class="chat_post">
                        <div class="cbox-title">我有话说: <span id="chat_reply" style="display:none;">@<i id="chat_to"></i></span>
                        </div>
                        <div class="cbox-post">
                            <div class="cbox-input">
                                <textarea id="chat_text" rows="3" placeholder="请输入评论内容"></textarea>
                                <input type="hidden" value="0" name="chat_pid" id="chat_pid">
                            </div>
                            <div class="cbox-ats clearfix">
                                <div class="ats-func">
                                    <div class="OwO" id="face-btn">
            <div class="OwO-logo"><span><i class="fa fa-smile-o fa-2"></i></span></div>
            <div class="OwO-body" style="width: 600px">
                <ul class="OwO-items OwO-items-emoticon OwO-items-show" style="max-height: 197px;">
                    <li class="OwO-item" title="Author: DIYgod">OωO</li>
                    <li class="OwO-item" title="Hi">|´・ω・)ノ</li>
                    <li class="OwO-item" title="开心">ヾ(≧∇≦*)ゝ</li>
                    <li class="OwO-item" title="星星眼">(☆ω☆)</li>
                    <li class="OwO-item" title="掀桌">（╯‵□′）╯︵┴─┴</li>
                    <li class="OwO-item" title="流口水">￣﹃￣</li>
                    <li class="OwO-item" title="捂脸">(/ω＼)</li>
                    <li class="OwO-item" title="给跪">∠( ᐛ 」∠)＿</li>
                    <li class="OwO-item" title="Hi">(๑•̀ㅁ•́ฅ)</li>
                    <li class="OwO-item" title="斜眼">→_→</li>
                    <li class="OwO-item" title="加油">୧(๑•̀⌄•́๑)૭</li>
                    <li class="OwO-item" title="有木有WiFi">٩(ˊᗜˋ*)و</li>
                    <li class="OwO-item" title="前方高能预警">(ノ°ο°)ノ</li>
                    <li class="OwO-item" title="我从未见过如此厚颜无耻之人">(´இ皿இ｀)</li>
                    <li class="OwO-item" title="吓死宝宝惹">⌇●﹏●⌇</li>
                    <li class="OwO-item" title="已阅留爪">(ฅ´ω`ฅ)</li>
                    <li class="OwO-item" title="去吧大师球">(╯°A°)╯︵○○○</li>
                    <li class="OwO-item" title="太萌惹">φ(￣∇￣o)</li>
                    <li class="OwO-item" title="咦咦咦">ヾ(´･ ･｀｡)ノ"</li>
                    <li class="OwO-item" title="气呼呼">( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃</li>
                    <li class="OwO-item" title="我受到了惊吓">(ó﹏ò｡)</li>
                    <li class="OwO-item" title="什么鬼">Σ(っ °Д °;)っ</li>
                    <li class="OwO-item" title="摸摸头">( ,,´･ω･)ﾉ"(´っω･｀｡)</li>
                    <li class="OwO-item" title="无奈">╮(╯▽╰)╭ </li>
                    <li class="OwO-item" title="脸红">o(*////▽////*)q </li>
                    <li class="OwO-item" title="">＞﹏＜</li>
                    <li class="OwO-item" title="">( ๑´•ω•) "(ㆆᴗㆆ)</li>
                    <li class="OwO-item" title="">(｡•ˇ‸ˇ•｡)</li>
                </ul>
                <div class="OwO-bar">
                    <ul class="OwO-packages">
                        <li class="OwO-package-active"><span>颜文字</span></li>
                    </ul>
                </div>
            </div>
            </div>
                                </div>
                                <div class="ats-issue">
                                    <button id="btn-chat" class="btn btn-success btn-sm bt">发送</button>
                                </div>
                            </div>
                        </div>
                        <div class="phiz-box" id="c-phiz" style="display:none">
                            <div class="phiz-list" view="c-phizs"></div>
                        </div>
                    </div>
                </div>
                <!-- /view show -->
            </div>
            <div class="col-xs-24 col-md-3 side-right hidden-xs hidden-sm">
            </div>
        </div>

        <script type="text/plain" id="chat_template">
            <li id="chat{5}">
                <a class="avt fl" target="_blank" href="/users/{0}">
                    <img src="{1}">
                </a>
                <div class="chat_body">
                    <h5>
                        <div class="fl"><a class="chat_name" href="/users/{0}">{2}</a><span>{3}</span></div>
                        <div class="fr reply_this"><a href="javascript:void(0);" onclick="goto('{5}', '{2}')"><i class="icon icon-action-redo"></i></a></div>
                        <div class="clear"></div>
                    </h5>
                    <div class="chat_p">
                        <div class="chat_pct">{4}</div> {6}
                    </div>
                </div>
                <div class="clear"></div>
                <div class="chat_reply"></div>
            </li>
        </script>

        <script type="text/javascript">
            function goto(pid, user) {
                document.getElementById('chat_text').scrollIntoView();
                $('#chat_text').focus();
                $('#chat_text').val('');
                $('#chat_to').text(user);
                $('#chat_pid').val(pid);

                $('#chat_reply').show();
            }
            var container = $("#chat_container");
            var template = $('#chat_template')[0].text;

            seajs.use(['comment', 'view'], function (comment) {
                comment.init({
                    load: 'true',
                    load_url: '/comment/list/60',
                    post_url: '/comment/submit',
                    toId: '60',
                    onLoad: function (i, data) {
                        var content = data.content;
                        var quoto = '';
                        if (data.pid > 0 && !(data.parent === null)) {
                            var pat = data.parent;
                            var pcontent = pat.content;
                            quoto = '<div class="quote"><a href="/users/' + pat.author.id + '">@' + pat.author.name + '</a>: ' + pcontent + '</div>';
                        }
                        var item = jQuery.format(template,
                                data.author.id,
                                data.author.avatar,
                                data.author.name,
                                data.created,
                                content,
                                data.id, quoto);
                        return item;
                    }
                });
            });

        </script>

        <script src="./vue初期_files/jquery.min.js.下载"></script>
        <script>
            $(".content").click(function(){
                var post_id= $(this).attr("content_val");
                $("a",this)[0].click();
                $(this).find("a").href= "/post/"+post_id;
                $("ul").find(`[content_val='60']`).addClass("li-selected").find("a").addClass("a-selected");
                $(this).siblings().find("a").removeClass();
            });

            $(".content").hover(function(){
                $(this).find("a").addClass("a-selected");
            }, function() {
                $(this).find("a").removeClass("a-selected");
                $("ul").find(`[content_val='60']`).addClass("li-selected").find("a").addClass("a-selected");
            });

            $(document).ready(function(){
                //console.log($("ul").find(`[content_val='60']`));
                $("ul").find(`[content_val='60']`).parent().parent().addClass("li-selected").find("a").addClass("a-selected");
                //$(".content:first").addClass("li-selected").find("a").addClass("a-selected");
            });
        </script>
            </div>
        </div>
    </div>
    <!-- /content -->

    <!-- footer -->


<a href="https://www.javaman.cn/vue/nodejs#" class="site-scroll-top">
    <i class="icon-arrow-up"></i>
</a>

<script type="text/javascript">
    seajs.use('main', function (main) {
        main.init();
    });
</script>

                </div>

                <div class="col-xs-24 col-md-3 side-right">
<div class="panel panel-default widget">
	<div style="margin-left: 45px;margin-top: 10px">
		<img src="./vue初期_files/gzh.png" style="width: 180px;height:180px ">
	</div>
	<div class="panel-body">
		<b face="微软雅黑" color="#000">关注博主公众号, 每日推送干货文章, 回复「资源」, 即可领取全网最火的Java学习&amp;面试核心资源!</b>
	</div>
</div>

<div class="panel panel-default widget">
	<div class="panel-heading">
		<h3 class="panel-title"><i class="fa fa-area-chart"></i> 热门教程</h3>
	</div>
	<div class="panel-body">
		<ul class="list">
            <li>1. <a href="https://www.javaman.cn/post/52">vue入门教程1-hello-vue</a></li>
            <li>2. <a href="https://www.javaman.cn/post/23">IDEA 2021.1 最新激活注册码 - 破解教程 [免费激活到 2099 年，亲测有效]</a></li>
            <li>3. <a href="https://www.javaman.cn/post/24">1.ETL简介</a></li>
            <li>4. <a href="https://www.javaman.cn/post/25">2.kettle基本概述</a></li>
            <li>5. <a href="https://www.javaman.cn/post/26">Spring Boot 入门教程</a></li>
            <li>6. <a href="https://www.javaman.cn/post/27">Spring Boot Starter Parent</a></li>
		</ul>
	</div>
</div>

<div class="panel panel-default widget">
	<div class="panel-heading">
		<h3 class="panel-title"><i class="fa fa-bars"></i> 最新教程</h3>
	</div>
	<div class="panel-body">
			<ul class="list">
					<li>1. <a href="https://www.javaman.cn/post/65">IDEA 如何关闭更新提示？</a></li>
					<li>2. <a href="https://www.javaman.cn/post/64">IDEA 无限重置 30 天试用期图文教程（永久激活，亲测有用）</a></li>
					<li>3. <a href="https://www.javaman.cn/post/63">IDEA（idea） 2021最新激活码注册码破解码 [永久激活，亲测有效]</a></li>
					<li>4. <a href="https://www.javaman.cn/post/62">IDEA 2021.2.2 最新激活注册码 - 破解教程 [永久激活，亲测有效]</a></li>
					<li>5. <a href="https://www.javaman.cn/post/61">mybatis-plus详细使用教程</a></li>
					<li>6. <a href="https://www.javaman.cn/post/60">后端拜拜，用不到你了，前端开发数据模拟神器nodejs</a></li>
			</ul>
	</div>
</div>
<div class="panel panel-default widget">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-comment-o"></i> 最新评论</h3>
    </div>
    <div class="panel-body">
			<ul class="list">
					<li><a href="https://www.javaman.cn/post/23">属于正常的哈</a></li>
					<li><a href="https://www.javaman.cn/post/23">激活后每次打开idea都会出现IDEA error occurred的错误提示怎么办啊，这正常吗</a></li>
			</ul>
    </div>
</div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <!-- /content -->

    <!-- footer -->
<footer class="footer" xmlns="http://www.w3.org/1999/html">
    <div class="container">
            <span style="margin-left: -100px;">
                Copy right © 2020-2021 爪哇男教程  www.javaman.cn  All Rights Reserved. <a href="https://beian.miit.gov.cn/" target="_blank">备案号: 皖ICP备2021001108号-2</a>
            </span>
    </div>
</footer>

<a href="https://www.javaman.cn/vue/nodejs#" class="site-scroll-top">
    <i class="icon-arrow-up"></i>
</a>

<script type="text/javascript">
    seajs.use('main', function (main) {
        main.init();
    });
</script>


<script src="./vue初期_files/jquery.min.js.下载"></script>
<script>
    $(document).ready(function(){
       $(".footer").first().remove();

    });
</script>

</body></html>